$height: 32px;

.category-page {
  @apply bg-white w-screen h-screen overflow-hidden;
  display: grid;
  // grid-template解释： / 之前是行，有几对''就是几行,'' 之后是行的高度, '里面定义了多少列,用空格隔开'，这里每个''中间都是两个类名
  // 说明有两列， / 之后对应了两列的宽度,左边是100px,右边是auto(剩余空间)
  // 其中content类名出现了两次，说明第一行第二列和第二行第二列共用同一个区域，也就是content区域

  grid-template:
    'category contentList' auto
    'nav contentList' 30px / 150px auto;

  .category {
    grid-area: category;
    @apply border-r bg-slate-100 text-xs text-slate-700 overflow-y-auto py-1;

    .quickAction {
      @apply border-b mb-3;

      .text {
        @apply px-2 mt-2 mb-1 opacity-90 text-[10px];
      }

      a.active {
        @apply bg-orange-500;
      }
    }

    // Link、NavLink组件会转换为a标签，需要设置为块元素
    a {
      @apply p-2 m-1 truncate cursor-pointer block rounded-md  hover:bg-slate-200;
      height: $height;
      -webkit-user-drag: none;

      &.active {
        @apply bg-blue-600 text-white;
      }

      &.drag-over {
        @apply bg-slate-400;
      }
    }

    .input-box {
      @apply w-full px-2;
      height: $height;
      input {
        @apply w-full h-full rounded-md px-2 outline-none border;
      }
    }
  }

  .nav {
    grid-area: nav;
    @apply border-r border-t bg-slate-100 flex justify-center items-center gap-3;
  }
  .contentList {
    grid-area: contentList;
    @apply overflow-y-auto;
  }
}
